<template>
	<view>
		<!-- 头部图片开始 -->
		<view class="header">
			<image :src="activityObj.banner" mode=""></image>
			<view class="number">
				<view>活动限报{{ activityObj.total }}人</view>
				<view style="margin-top: 10rpx;">已有{{ activityObj.sales }}人报名</view>
			</view>
			<view class="code-l" @click="goBack">
				<view class="iconfont icon-zuo" style="text-align: center;line-height: 75rpx;color: #000;font-weight: 800;"></view>
			</view>
			<view class="code-r" @click="popQrCode">
				<view class="iconfont icon-ico" style="text-align: center;line-height: 75rpx;color: #000;font-weight: 800;"></view>
			</view>
			
		</view>
		
		<!-- 分享二维码区域 -->
		<view style="position: relative;" v-if="isShowQrCode">
			<view style="background-image: linear-gradient(#666, #646664, #536254, #3f5a41, #38573b);padding: 50rpx;position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 1000;padding: 0;display: flex;justify-content: center;">
				<image :src="share_img" mode="" style="width: 100%;height: 1108rpx;margin: 48rpx 24rpx 24rpx;"></image>
				<view style="position: absolute;right: 8rpx;top: 20rpx;font-size: 56rpx;width: 50rpx;height: 50rpx;background-color: #fff;border-radius: 50%;text-align: center;line-height: 25px;" @click="closeShare">
					<text>×</text>
				</view>
			</view>
			<!-- <view style="width: 750rpx;height: 320rpx;background-color: #fff;border-radius: 10rpx 10rpx 0 0;position: fixed;z-index: 1005;bottom: 0;">
				<view style="display: flex;">
					<text style="display: flex;flex: 1;justify-content: center;margin-left: 38rpx;margin-top: 40rpx;font-size: 36rpx;color: #1a1a1a;">分享</text>
					<text style="margin-right: 38rpx;margin-top: 40rpx;font-size: 40rpx;color: #999;" @click="closeShare">×</text>
				</view>
				<view style="margin-top: 50rpx;" class="share">
					<view>
						<image src="/static/weixin_share.png" mode=""></image>
						<text>微信好友</text>
					</view>
					<view>
						<image src="/static/pengyouquan_share.png" mode=""></image>
						<text>朋友圈</text>
					</view>
					<view>
						<image src="/static/xiazai_share.png" mode=""></image>
						<text>下载到相册</text>
					</view>
					
				</view>
			</view> -->
		</view>
		<!--  倒计时开始 -->
		<view class="main">
			<view class="countdown">
				<view class="countdowntop">
					<view class="title">{{ activityObj.title }}</view>
					<view class="money">{{ activityObj.subtitle }}</view>
					<view class="info">本活动由金宝贝{{ activityObj.merch_name }}发布</view>
				</view>
				<view class="countdownbottom">
					<view v-show="flag" style="padding: 30rpx 0 0 30rpx;display: flex;align-items: center;">
						<text style="color: #fe8700;font-size: 28rpx;">{{ activeStartText }}</text>
						<text class="time">{{ d.days1 }}</text>
						<text class="time" style="margin: 0 2px 0;">{{ d.days2 }}</text>
						<text style="font-size: 30rpx;margin-right: 2px;">天</text>
						<text class="time">{{ d.hours1 }}</text>
						<text class="time" style="margin: 0 2px 0;">{{ d.hours2 }}</text>
						<text style="font-size: 30rpx;margin-right: 2px;">时</text>
						<text class="time">{{ d.minutes1 }}</text>
						<text class="time" style="margin: 0 2px 0;">{{ d.minutes2 }}</text>
						<text style="font-size: 30rpx;margin-right: 2px;">分</text>
						<text class="time">{{ d.seconds1 }}</text>
						<text class="time" style="margin: 0 2px 0;">{{ d.seconds2 }}</text>
						<text style="font-size: 30rpx;">秒</text>
					</view>
					<view v-show="!flag" style="padding: 30rpx 0 0 30rpx;display: flex;align-items: center;color: #b3b3b3">活动已结束</view>
					<view class="line" :class="{gray: !flag}"></view>
					<view class="date-con">
						<view class="date-l">
							<text class="date-info">报名截止日期</text>
							<text class="date-infos">{{ activityObj.presell_end_time ? activityObj.presell_end_time.split(' ')[0] : '' }}</text>
						</view>
						<view class="date-r">
							<text class="date-info">活动上课日期</text>
							<text class="date-infos">{{ activityObj.start_time ? activityObj.start_time.split(' ')[0] : '' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 报名成功头像开始 -->
		<view class="main profile" v-show="success_members.length>0">
			<view class="join">报名成功</view>
			<view style="position: relative;margin-top: 26rpx;">
				<image :src="item.avatar" mode="" class="header-photo" v-for="(item, index) in success_members" :key="index"></image>
			</view>
		</view>
		
		<!-- 等位用户头像开始 -->
		<view class="main profile" style="margin-top: 45rpx;margin-bottom: 50rpx;" v-show="line_members.length>0">
			<view class="join">等位用户</view>
			<view style="position: relative;margin-top: 26rpx;">
				<!-- <image src="/static/missing-face.png" mode="" class="header-photo"></image> -->
				<image :src="item.avatar" mode="" class="header-photo" v-for="(item, index) in line_members" :key="index"></image>
			</view>
		</view>
		<!-- 这个是那条背景 -->
		<view class="line-bg"></view>
		<!-- 适用门店开始 -->
		<view class="main shop">
			<view class="shop-title">
				<view class="join" style="display: flex;flex: 1;font-size: 40rpx;color: #032545;font-weight: 700;">适用门店</view>
				<view style="display: flex;align-items: flex-end;">
					<view style="font-size: 28rpx;color: #032545;">{{ newSoreList.length }} 家</view>
					<view class="iconfont icon-xiangxia1" style="color: #acb3bb;margin-left: 5px;"></view>
				</view>
			</view>
			<view class="shop-list" v-for="(item, index) in storeList" :key="index">
				<view style="font-size: 28rpx;color: #1a1a1a;display: flex;flex: 1;">{{ item.name }}</view>
				<image src="/static/dianhua.png" mode="" @click="phone(item)"></image>
				<view style="width: 2rpx;height: 37rpx;background-color: #acb3bb;margin: 0 30rpx;"></view>
				<image src="/static/dizhi.png" mode="" @click="position(item)"></image>
			</view>
			
			<view class="more" @click="more">更多</view>
			<!-- 定位 -->
			<view class="position" v-show="isShowPosition">
				<view class="name">{{ currentStoreObj.name}}</view>
				<view class="list" style="margin-top: 30rpx;" @click="getLocation">
					<image src="/static/position_1.png" mode=""></image>
					<text>{{ currentStoreObj.address}}</text>
					<view class="iconfont icon-gengduo" style="color: #acb3bb;"></view>
				</view>
				<view class="list" @click.stop="callPhone">
					<image src="/static/position_2.png" mode="" style="width: 29rpx;height: 29rpx;"></image>
					<text>{{ currentStoreObj.phone}}</text>
					<!-- <navigator url="tel: 0591-83569336">0591-83569336</navigator> -->
					<view class="iconfont icon-gengduo" style="color: #acb3bb;"></view>
				</view>
				<view class="list">
					<image src="/static/position_3.png" mode="" style="width: 29rpx;height: 29rpx;"></image>
					<text>{{ currentStoreObj.business_hours}}</text>
					<view class="iconfont icon-gengduo" style="color: #acb3bb;"></view>
				</view>
				<view class="btn" @click.stop="closePosition">我知道了</view>
			</view>
			<!-- 这是遮罩 -->
			<view class="mask" v-show="isShowMask"></view>
		</view>
		<!-- 这个是那条背景 -->
		<view class="line-bg"></view>
		
		<!-- 活动详情开始 -->
		<view class="main detail">
			<view class="join" style="font-size: 40rpx;color: #032545;font-weight: 700;">活动详情</view>
			<view class="ql-editor" style="margin-top: 45rpx;margin-bottom: 130rpx;" v-html="activityObj.content">
				<!-- <image src="" mode="" style="background-color: red;width: 100%;"></image> -->
			</view>
		</view>
		
		<!-- 最下面报名和返回首页组件 -->
		<Button :btnForbid='!btnIsShow' :activityObj="activityObj" :userInfoDetail="userInfoDetail" :isCompletion="isCompletion" @forbidBtn="forbidBtn" :flag="flag" :remind="remind" @getRemind="getRemind"></Button>
	</view>
</template>

<script>
	import { getActivityOne, getActivityOneQrCode, getUserInfo, getBase, getWxConfig, activityRemind } from '../../api/index.js'
	import Button from '../../components/button.vue'
	import wx from '../jweixin/index.js'
	export default {
		components: {
			Button
		},
		data() {
			return {
				id: '', // 当前活动的id,浏览器中获取
				isShowMask: false, // 遮罩默认不显示
				isShowPosition: false ,// 定位 默认不显示
				activityObj: {}, // 当前活动对象
				activeStartText: '距离活动开始：',
				totalSecondsStart: '',
				totalSeconds: '',
				d: {
					days1: '',
					days2: '',
					hours1: '',
					hours2: '',
					minutes1: '',
					minutes2: '',
					seconds1: '',
					seconds2: ''
				}, // 时间
				storeList: [], // 适用门店列表
				newSoreList: [], // 新的适用门店列表
				currentStoreObj: {}, // 点击的当前门店对象
				success_members: [], // 报名成功的头像
				line_members: [], // 等位用户的头像
				flag: true, // 时间到了就换到期了  的控制器
				share_img: '', // 分享的二维码图片
				isShowQrCode: false, // 默认不显示分享窗口
				userInfoDetail: {},
				isCompletion: false, // 是否补全资料
				notBegin: true,
				newUrl: '',
				btnIsShow: true,
				remind: {}, // 预约提醒，有对象值的话存在，没有就是空数组
			};
		},
		onLoad(option) {
			this.id = option.id
			console.log(option.id); //打印出上个页面传递的参数。
			this._getBase() // 判断是否补全资料
			getUserInfo({}, (res) => {
				console.log("resresresresresresres")
				console.log(res)
				console.log("resresresresresresres")
				if (res.code === 0) {
					this.userInfoDetail = res.data.member
					this._getActivityOne() // 获取页面详情
				}
				if (res.code === 3) {
					uni.showToast({
			　　　　　　 title: res.message,
			　　　　　　 icon: 'none'
			　　　　 })
					let url = encodeURIComponent(`https://mobile.laiba.shop/html/#/pages/active/detail?id=${option.id}`)
					window.location.href = 'https://mobile.laiba.shop/activity/visitor/auth?url=' + url
				}
			})
			
		},
		methods: {
			_getWxConfig() {
				getWxConfig({}, (res) => {
					console.log(res)
					let data = {
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature,// 必填，签名
						// jsApiList: ['updateAppMessageShareData','updateTimelineShareData','downloadImage'] ,// 必填，需要使用的JS接列表
						jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','downloadImage'] // 必填，需要使用的JS接口列表
					}
					
					wx.config(data)
					wx.ready( () => {
						if (location.href.includes('?from')) {
							let sLink = location.href.split('?')
							window.location.href = 'https://mobile.laiba.shop/html/#/pages/active/detail?' + sLink[2]
						}
						this.newUrl = location.href
						wx.onMenuShareAppMessage({ 
						    title: this.activityObj.title, // 分享标题
						    desc: this.activityObj.subtitle, // 分享描述
						    link: this.newUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						    imgUrl: this.activityObj.banner, // 分享图标
							// imgUrl: 'http://oss.laiba.shop/activity/20191216/openproxy.jpeg', // 分享图标
						    success: () => {
						      // 设置成功
							  uni.showToast({
							  	title: '分享成功',
								icon: 'none'
							  })
						    }
						})
						wx.onMenuShareTimeline({
							title: this.activityObj.title, // 分享标题
							link: this.newUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: this.activityObj.banner, // 分享图标
							success: () => {
							  // 设置成功
							  uni.showToast({
							  	title: '分享成功',
								icon: 'none'
							  })
							}
						})
					})
				})
			},
			// 是否补全资料
			_getBase() {
				getBase({}, (res) => {
					this.isCompletion = res.data.isCompletion
				})
			},
			_getActivityOne() {
				// 获取当前活动详情
				let data = {id: this.id}
				getActivityOne(data, (res) => {
					console.log(res.data);
					this.activityObj = res.data.list
					this.storeList = res.data.storeList.slice(0,3)
					this.newSoreList = res.data.storeList
					this.remind = res.data.remindStatus
					// this._getWxConfig() // 获取微信分享信息
					if(res.data.success_members.length > 12) {
						this.success_members = res.data.success_members.slice(0,12)
					} else {
						this.success_members = res.data.success_members
					}
					if(res.data.line_members.length > 12) {
						this.line_members = res.data.line_members.slice(0,12)
					} else {
						this.line_members = res.data.line_members
					}
					let that = this
					let t = parseInt(new Date().getTime()); // 当前日期转时间戳
					// console.log(typeof t)
					let T = parseInt(new Date(res.data.list.presell_end_time.replace(/-/g,'/')).getTime()) // 指定日期转时间戳 活动结束时间
					let s = parseInt(new Date(res.data.list.presell_start_time.replace(/-/g,'/')).getTime()) // 指定日期转时间戳 活动开始时间
					console.log(parseInt((s - t)/1000))
					var totalSecondsStart = parseInt((s - t)/1000); // 距离活动开始时间 <0代表活动已经开始
					this.totalSecondsStart = totalSecondsStart
					// console.log(typeof T)
					//相差的总秒数
					var totalSeconds = parseInt((T - t)/1000); // 距离活动结束时间 <0代表活动已经结束
					this.totalSeconds = totalSeconds
					
					if (totalSecondsStart > 0) {
						//延迟一秒执行自己
						let timerS = setInterval(() => {
							//天数
							var days = Math.floor(totalSecondsStart / (60 * 60 * 24));
							//取模（余数）
							var modulo = totalSecondsStart % (60 * 60 * 24);
							//小时数
							var hours = Math.floor(modulo / (60 * 60));
							modulo = modulo % (60 * 60);
							//分钟
							var minutes = Math.floor(modulo / 60);
							//秒
							var seconds = modulo % 60;
							// that.d =  "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒"
							
							if(days <= 9) {
							 	that.d.days1 = '0'
								that.d.days2 = String(days)
							} else {
								// that.d.days1 = String(days).substring(0,1)
								// that.d.days2 = String(days).substring(1,2)
								that.d.days1 = String(days).split('')[0]
								that.d.days2 = String(days).split('')[1]
							}
							
							if(hours <= 9) {
								that.d.hours1 = '0'
								that.d.hours2 = String(hours)
							} else {
								// that.d.hours1 = String(hours).substring(0,1)
								// that.d.hours2 = String(hours).substring(1,2)
								that.d.hours1 = String(hours).split('')[0]
								that.d.hours2 = String(hours).split('')[1]
							}
							
							if(minutes <= 9) {
								that.d.minutes1 = '0'
								that.d.minutes2 = String(minutes)
							} else {
								// that.d.minutes1 = String(minutes).substring(0,1)
								// that.d.minutes2 = String(minutes).substring(1,2)
								that.d.minutes1 = String(minutes).split('')[0]
								that.d.minutes2 = String(minutes).split('')[1]
							}
							
							if(seconds <= 9) {
								that.d.seconds1 = '0'
								that.d.seconds2 = String(seconds)
							} else {
								// that.d.seconds1 = String(seconds).substring(0,1)
								// that.d.seconds2 = String(seconds).substring(1,2)
								that.d.seconds1 = String(seconds).split('')[0]
								that.d.seconds2 = String(seconds).split('')[1]
							}
							
							totalSecondsStart--
							if (totalSecondsStart <= 0) {
								clearInterval(timerS)
								// this.flag = false
								this.activeStartText = '距离活动结束：'
								// 截止时间 - 当前时间
								let total = (parseInt(T) - parseInt(new Date().getTime())) / 1000
								// clearInterval(timerS)
								//延迟一秒执行自己
								let timer = setInterval(() => {
									//天数
									var days2 = Math.floor(total / (60 * 60 * 24));
									//取模（余数）
									var modulo2 = total % (60 * 60 * 24);
									//小时数
									var hours2 = Math.floor(modulo2 / (60 * 60));
									modulo2 = modulo2 % (60 * 60);
									//分钟
									var minutes2 = Math.floor(modulo2 / 60);
									//秒
									var seconds2 = modulo2 % 60;
									// that.d =  "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒"
									
									if(days <= 9) {
									 	that.d.days1 = '0'
										that.d.days2 = String(days2)
									} else {
										// that.d.days1 = String(days).substring(0,1)
										// that.d.days2 = String(days).substring(1,2)
										that.d.days1 = String(days2).split('')[0]
										that.d.days2 = String(days2).split('')[1]
									}
									
									if(hours <= 9) {
										that.d.hours1 = '0'
										that.d.hours2 = String(hours2)
									} else {
										// that.d.hours1 = String(hours).substring(0,1)
										// that.d.hours2 = String(hours).substring(1,2)
										that.d.hours1 = String(hours2).split('')[0]
										that.d.hours2 = String(hours2).split('')[1]
									}
									
									if(minutes <= 9) {
										that.d.minutes1 = '0'
										that.d.minutes2 = String(minutes2)
									} else {
										// that.d.minutes1 = String(minutes).substring(0,1)
										// that.d.minutes2 = String(minutes).substring(1,2)
										that.d.minutes1 = String(minutes2).split('')[0]
										that.d.minutes2 = String(minutes2).split('')[1]
									}
									
									if(seconds <= 9) {
										that.d.seconds1 = '0'
										that.d.seconds2 = String(seconds2)
									} else {
										// that.d.seconds1 = String(seconds).substring(0,1)
										// that.d.seconds2 = String(seconds).substring(1,2)
										that.d.seconds1 = String(seconds2).split('')[0]
										that.d.seconds2 = String(seconds2).split('')[1]
									}
									
									totalSeconds--
									if (totalSeconds <= 0) {
										this.flag = false
										// this.notBegin = false
									}
								}, 1000)
								
								if (totalSeconds <= 0) {
									clearInterval(timer)
									that.flag = false
									// this.notBegin = false
								}
							}
							
						}, 1000)
						
					} else {
						this.activeStartText = '距离活动结束：'
						// clearInterval(timerS)
						//延迟一秒执行自己
						let timer = setInterval(() => {
							//天数
							var days = Math.floor(totalSeconds / (60 * 60 * 24));
							//取模（余数）
							var modulo = totalSeconds % (60 * 60 * 24);
							//小时数
							var hours = Math.floor(modulo / (60 * 60));
							modulo = modulo % (60 * 60);
							//分钟
							var minutes = Math.floor(modulo / 60);
							//秒
							var seconds = modulo % 60;
							// that.d =  "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒"
							
							if(days <= 9) {
							 	that.d.days1 = '0'
								that.d.days2 = String(days)
							} else {
								// that.d.days1 = String(days).substring(0,1)
								// that.d.days2 = String(days).substring(1,2)
								that.d.days1 = String(days).split('')[0]
								that.d.days2 = String(days).split('')[1]
							}
							
							if(hours <= 9) {
								that.d.hours1 = '0'
								that.d.hours2 = String(hours)
							} else {
								// that.d.hours1 = String(hours).substring(0,1)
								// that.d.hours2 = String(hours).substring(1,2)
								that.d.hours1 = String(hours).split('')[0]
								that.d.hours2 = String(hours).split('')[1]
							}
							
							if(minutes <= 9) {
								that.d.minutes1 = '0'
								that.d.minutes2 = String(minutes)
							} else {
								// that.d.minutes1 = String(minutes).substring(0,1)
								// that.d.minutes2 = String(minutes).substring(1,2)
								that.d.minutes1 = String(minutes).split('')[0]
								that.d.minutes2 = String(minutes).split('')[1]
							}
							
							if(seconds <= 9) {
								that.d.seconds1 = '0'
								that.d.seconds2 = String(seconds)
							} else {
								// that.d.seconds1 = String(seconds).substring(0,1)
								// that.d.seconds2 = String(seconds).substring(1,2)
								that.d.seconds1 = String(seconds).split('')[0]
								that.d.seconds2 = String(seconds).split('')[1]
							}
							
							totalSeconds--
							if (totalSeconds <= 0) {
								this.flag = false
								// this.notBegin = false
							}
						}, 1000)
						
						if (totalSeconds <= 0) {
							clearInterval(timer)
							that.flag = false
							// this.notBegin = false
						}
					}
					
				})
			},
			// 获取定位，调用地图
			getLocation() {
				// uni.chooseLocation({
				// 	success: (data)=> {
				// 		// this.addressData.addressName = data.name;
				// 		// this.addressData.address = data.name;
				// 		console.log(data)
				// 	}
				// })
				
				// window.location.href = 'http://laima.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=store.map&id=14&merchid=106'
				window.location.href = `http://laima.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=store.map&type=1&name=${this.currentStoreObj.name}&phone=${this.currentStoreObj.phone}&lng=${this.currentStoreObj.lng}&lat=${this.currentStoreObj.lat}&address=${this.currentStoreObj.address}`
			},
			// 弹出分享的二维码
			popQrCode() {
				console.log('加载图片中')
				uni.showLoading({title: '加载中',icon: 'none'})
				let data = {id: this.id}
				getActivityOneQrCode(data, (res) => {
					uni.hideLoading()
					console.log(res)
					console.log('二维码出来了')
					if (res.code === 0) {
						this.share_img = res.data.url
						this.isShowQrCode = true
					}
					
				}, (err) => {
					console.log(err)
					uni.showToast({
			　　　　　　 title: "请求失败",
			　　　　　　 icon: 'none'
			　　　　 })
					// uni.hideLoading()
				})
			},
			// 关闭分享
			closeShare() {
				this.isShowQrCode = false
			},
			// 门店更多
			more() {
				if(this.storeList.length == this.newSoreList.length) {
					uni.showToast({
			　　　　　　 title: "没有更多了",
			　　　　　　 icon: 'none'
			　　　　 })
					return
				}
				this.storeList = this.newSoreList
			},
			// 返回上一页
			goBack() {
				// uni.navigateBack({
				// 	url: '/pages/active/list'
				// })
				uni.switchTab({
					url: '/pages/active/list'
				})
			},
			// 点击定位
			position(item) {
				console.log(item)
				this.currentStoreObj = item
				console.log('定位开启中')
				this.isShowMask = true
				this.isShowPosition = true // 显示定位
			},
			// 关闭定位，电话功能
			closePosition() {
				console.log('关闭定位')
				this.isShowMask = false
				this.isShowPosition = false // 关闭定位
			},
			// 点击打电话图标
			phone(item) {
				console.log(item)
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber: item.phone, 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (err) => {
						console.log('调用失败!')
					}
				})
			},
			// 打电话
			callPhone() {
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber: this.currentStoreObj.phone, 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (err) => {
						console.log('调用失败!')
					}
				})
			},
			forbidBtn(val) {
				console.log(val)
				this.btnIsShow = !val
			},
			getRemind(val) {
				// 306预约提醒，307取消预约
				let data = val ? {aid: this.id-0, status: 1} : {aid: this.id-0, status: 0}
				console.log(data)
				activityRemind(data, (res) => {
					console.log(res)
					this.remind.code = val ? 307 : 306
					uni.showToast({title: "操作成功",icon: 'none'})
				}, (err) => {
					console.log(err)
					uni.showToast({
			　　　　　　 title: "请求失败",
			　　　　　　 icon: 'none'
			　　　　 })
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail {
		padding-bottom: 35px !important;
	}
	.main {
		margin: 35rpx 35rpx;
	}
	.line-bg {
		height: 18rpx;
		background-color: #f1f2f6;
	}
	.header {
		width: 750rpx;
		height: 560rpx;
		background-color: #ddd;
		image {
			// width: 100%;
			width: 750rpx;
			height: 560rpx;
		}
		position: relative;
		.code-r,.code-l {
			width: 75rpx;
			height: 75rpx;
			background-color: #fff;
			opacity: 0.5;
			border-radius: 50%;
			position: absolute;
		}
		.code-r {
			right: 20rpx;
			top: 20rpx;
		}
		.code-l {
			left: 20rpx;
			top: 20rpx;
		}
		.code-l:avtive,.code-r:active {
			opacity: 0.4;
		}
		.number {
			width: 170rpx;
			height: 116rpx;
			position: absolute;
			left: 0;
			bottom: 20rpx;
			font-family: SourceHanSansCN-Normal;
			font-size: 22rpx;
			color: #ffffff;
			view {
				width: 170rpx;
				height: 50rpx;
				background-color: #fe8700;
				opacity: 0.8;
				text-align: center;
				line-height: 50rpx;
				border-radius: 0 25rpx 25rpx 0;
			}
		}
	}
	.countdown {
		width: 680rpx;
		// height: 492rpx;
		background-color: #ffffff;
		box-shadow: 2rpx 3rpx 20rpx 0rpx 
			rgba(49, 49, 49, 0.11);
		border-radius: 11rpx;
		.countdowntop {
			width: 680rpx;
			// height: 266rpx;
			background-image: linear-gradient(-90deg, 
				#fe8700 0%, 
				#ff9e2c 100%), 
			linear-gradient(
				#fe8700, 
				#fe8700);
			background-blend-mode: normal, 
				normal;
			border-radius: 7rpx 7rpx 0 0;
			color: #fff;
			.title {
				font-size: 38rpx;
				line-height: 66rpx;
				padding: 33rpx 33rpx 22rpx 33rpx;
				font-weight: 600;
			}
			.money {
				font-size: 28rpx;
				padding: 0 33rpx 38rpx 33rpx;
				opacity: 0.9;
			}
			.info {
				padding-left: 33rpx;
				font-size: 20rpx;
				opacity: 0.7;
				padding-bottom: 33rpx;
			}
		}
		.countdownbottom {
			padding-bottom: 34rpx;
			.time {
				width: 32rpx;
				height: 43rpx;
				background-color: #fe8700;
				border-radius: 4rpx;
				color: #fff;
				font-weight: normal;
				text-align: center;
				line-height: 43rpx;
			}
			.line {
				width: 100rpx;
				height: 4rpx;
				background-color: #fe8700;
				border-radius: 2rpx;
				margin: 16rpx 0 30rpx 30rpx;
			}
			.gray {
				background-color: #b3b3b3;
			}
			.date-con {
				padding-left: 30rpx;
				display: flex;
				.date-l,.date-r{
					display: flex;
					flex-direction: column;
				}
				.date-info {
					font-size: 24rpx;
					color: #232323;
				}
				.date-infos {
					font-size: 32rpx;
					color: #fe8700;
					margin-top: 5rpx;
					font-weight: 700;
				}
				.date-r {
					margin-left: 182rpx;
				}		
			}
		}
	}
	.profile {
		height: 160rpx;
		.join {
			font-size: 40rpx;
			color: #032545;
			font-weight: 700;
		}
		.header-photo {
			width: 94rpx;
			height: 94rpx;
			position: absolute;
			top: 0;
			border-radius: 50%;
		}
		.header-photo:nth-child(1) {
			left: 0;
		}
		.header-photo:nth-child(2) {
			left: 50rpx;
			z-index: 2;
		}
		.header-photo:nth-child(3) {
			left: 100rpx;
			z-index: 3;
		}
		.header-photo:nth-child(4) {
			left: 150rpx;
			z-index: 4;
		}
		.header-photo:nth-child(5) {
			left: 200rpx;
			z-index: 5;
		}
		.header-photo:nth-child(6) {
			left: 250rpx;
			z-index: 6;
		}
		.header-photo:nth-child(7) {
			left: 300rpx;
			z-index: 7;
		}
		.header-photo:nth-child(8) {
			left: 350rpx;
			z-index: 8;
		}
		.header-photo:nth-child(9) {
			left: 400rpx;
			z-index: 9;
		}
		.header-photo:nth-child(10) {
			left: 450rpx;
			z-index: 10;
		}
		.header-photo:nth-child(11) {
			left: 500rpx;
			z-index: 11;
		}
		.header-photo:nth-child(12) {
			left: 550rpx;
			z-index: 12;
		}
		
	}
	.shop {
		.shop-title {
			display: flex;
			margin-bottom: 5rpx;
		}
		.shop-list {
			height: 98rpx;
			line-height: 98rpx;
			display: flex;
			align-items: center;
			border-bottom: 0.5px solid #f5f5f5;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.more {
			margin: 28rpx auto 0;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			line-height: 60rpx;
			text-align: center;
			background-color: #000;
			opacity: 0.2;
			font-size: 20rpx;
			color: #fff;
		}
		.more:active {
			opacity: 0.3;
		}
		.position {
			width: 630rpx;
			height: 655rpx;
			background-color: #fffeff;
			// background-color:skyblue;
			border-radius: 12rpx;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 9999;
			padding: 0 39rpx;
			.name {
				font-family: SourceHanSansCN-Medium;
				font-size: 50rpx;
				color: #032545;
				padding-top: 50rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.list {
				display: flex;
				height: 100rpx;
				align-items: center;
				border-bottom: 1rpx dotted #e5e5e5;
				image {
					width: 25rpx;
					height: 31rpx;
					margin-right: 20rpx;
				}
				text {
					font-size: 28rpx;
					color: #032545;
					display: flex;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
			.btn {
				width: 260rpx;
				height: 70rpx;
				background-color: #f98b05;
				box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(4, 0, 0, 0.02);
				border-radius: 35rpx;
				font-size: 32rpx;
				color: #ffffff;
				margin: 100rpx auto 0;
				text-align: center;
				line-height: 70rpx;
			}
			.btn:active {
				opacity: 0.9;
			}
		}
		.mask {
			position:fixed;
			width:100%;
			height:100%;
			background-color:#000;
			opacity:0.7;
			filter:alpha(opacity=70);
			left:0;
			bottom: 0;
			z-index:103;
		}
	}
	.share {
		display: flex;
		justify-content: space-around;
		view {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image {
				width: 80rpx;
				height: 80rpx;
			}
			text {
				font-size: 22rpx;
				color: #1a1a1a;
				padding-top: 20rpx
			}
		}
	}
</style>
